<template>
    <div class="filter">
        <div class="filter-item">
            <label for="">所属单位：</label>
            <el-select
                v-model="searchForm.depId"
                class="m-2"
                style="width: 145px"
                :disabled="localTypeUnit != '1'"
            >
                <el-option
                    v-for="item in depIdList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>

        <div class="filter-item">
            <label for="">任务项：</label>
            <el-input
                v-model="searchForm.title"
                placeholder="请输入"
                style="width: 145px;"
            />
        </div>
        <div class="filter-item">
            <el-button
                size="default"
                type="primary"
                @click="search"
            >查询</el-button>
            <el-button
                size="default"
                @click="reset"
            >重置</el-button>
        </div>
    </div>

    <div class="filter">
        <div class="filter-item">
            <el-button
                type="primary"
                @click="handleClick('add')"
            >新增</el-button>
        </div>
    </div>

    <el-table
        :data="tableData"
        style="width: 100%"
        id="inspectionTask"
    >
        <el-table-column
            prop="depId"
            label="所属单位"
        >
            <template #default="scope">
                {{ depIdType(scope.row.depId) }}
            </template>
        </el-table-column>
        <el-table-column
            prop="title"
            label="任务项"
        >
            <template #default="scope">
                {{ titleType(scope.row.taskId) }}
            </template>
        </el-table-column>
        <el-table-column
            prop="relationDailyItemName"
            label="关联日报项"
        />
        <el-table-column
            fixed="right"
            label="操作"
            width="160"
        >
            <template #default="scope">
                <el-button
                    type="primary"
                    size="small"
                    :icon="View"
                    @click="handleClick('detail', scope.row)"
                >
                </el-button>
                <el-button
                    type="primary"
                    size="small"
                    :icon="Edit"
                    @click="handleClick('edit', scope.row)"
                >
                </el-button>
                <el-button
                    type="danger"
                    size="small"
                    :icon="Delete"
                    @click="handleDelete(scope.row)"
                ></el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 新增/编辑 -->

    <el-pagination
        v-model:current-page="searchForm.pageNo"
        v-model:page-size="searchForm.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="paginationStyle"
    />
    <el-dialog
        v-model="taskVisible"
        :title="taskTitle"
        width="992"
    >
        <el-scrollbar height="460px">
            <div class="dialogContent">
                <el-form
                    ref="taskFormRef"
                    :model="taskForm"
                    label-width="100px"
                    class="demo-ruleForm"
                    :inline="true"
                    :disabled="taskType == 'detail'"
                >
                    <div class="dialogModel">
                        <el-row>
                            <el-col :span="10">
                                <el-form-item
                                    label="所属单位"
                                    prop="depId"
                                    style="width: 100%;"
                                >
                                    <el-select
                                        v-model="taskForm.depId"
                                        class="m-2"
                                        :disabled="localTypeUnit != '1'"
                                    >
                                        <el-option
                                            v-for="item in taskDepIdList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item
                                    label="任务项"
                                    prop="title"
                                    style="width: 100%;"
                                >
                                    <el-select
                                        v-model="taskForm.taskId"
                                        placeholder="请选择"
                                        @click="taskIdChange"
                                    >
                                        <el-option
                                            v-for="item in taskList"
                                            :key="item.id"
                                            :label="item.title"
                                            :value="item.id"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="dialogModel">
                        <div class="modelTitle">
                            <div>关联日报项</div>
                            <div
                                class="operateIcon"
                                v-show="taskType != 'detail'"
                            >
                                <img
                                    src="../../../../assets/images/plus.png"
                                    alt=""
                                    @click="addSteps"
                                >
                                <img
                                    v-if="taskForm.relatedIndicatorList && taskForm.relatedIndicatorList.length > 1"
                                    src="../../../../assets/images/minus.png"
                                    alt=""
                                    @click="deleteSteps"
                                >
                            </div>
                        </div>

                        <el-tabs
                            v-model="childrenTasksActiveName"
                            class="demo-tabs"
                        >
                            <el-tab-pane
                                v-for="(item, index) in taskForm.relatedIndicatorList"
                                :key="index"
                                :label="`指标${index + 1}`"
                                :name="index"
                            >
                                <el-row>
                                    <el-col :span="10">
                                        <el-form-item
                                            label="指标名称"
                                            prop="indicatorName"
                                            style="width: 100%;"
                                        >
                                            <el-input
                                                v-model="item.indicatorName"
                                                placeholder="请输入"
                                            />
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <div class="rowTitle">关联指标</div>
                                </el-row>
                                <el-row :span="24">
                                    <div style="padding: 0 30px 20px;width: 100%;">
                                        <el-table
                                            :data="item.indicatorDetailList"
                                            style="width: 98%"
                                            border
                                            id="inspectionTask"
                                        >
                                            <el-table-column
                                                prop="dailyIndicator"
                                                label="显示名称"
                                                width="140"
                                            >
                                                <template #default="scope">
                                                    <el-input
                                                        v-model="scope.row.dailyIndicator"
                                                        placeholder="请输入"
                                                    />
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="relatedIndicator"
                                                label="任务项"
                                                width="200"
                                            >
                                                <template #default="scope">
                                                    <el-select
                                                        v-model="scope.row.relatedIndicator"
                                                        placeholder="请选择"
                                                        clearable
                                                    >
                                                        <el-option
                                                            v-for="item in relatedIndicatorList"
                                                            :key="item"
                                                            :label="item"
                                                            :value="item"
                                                        />
                                                    </el-select>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="relationDailyItemName"
                                                label="合规范围"
                                            >
                                                <template #default="scope">
                                                    <div class="complianceScope">
                                                        <el-input
                                                            v-model="scope.row.standardScope.min"
                                                            placeholder="最小值"
                                                        />
                                                        <span style="margin: 0 10px">-</span>
                                                        <el-input
                                                            v-model="scope.row.standardScope.max"
                                                            placeholder="最大值"
                                                        />
                                                        <el-checkbox
                                                            style="margin: 0 10px"
                                                            v-model="scope.row.standardScope.containsMin"
                                                            :true-value="1"
                                                            :false-value="0"
                                                            label="包含最小值"
                                                            size="small"
                                                        />
                                                        <el-checkbox
                                                            style="margin: 0 10px"
                                                            v-model="scope.row.standardScope.containsMax"
                                                            :true-value="1"
                                                            :false-value="0"
                                                            label="包含最大值"
                                                            size="small"
                                                        />
                                                    </div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="relationDailyItemName"
                                                label="操作"
                                                width="80px"
                                            >
                                                <template #default="scope">
                                                    <div
                                                        class="operateIcon"
                                                        v-show="taskType != 'detail'"
                                                    >
                                                        <img
                                                            src="../../../../assets/images/plus.png"
                                                            alt=""
                                                            @click="addProcessValue()"
                                                            style=" width: 20px;height: 20px;margin-right: 4px;margin-top: 5px"
                                                        >
                                                        <img
                                                            v-if="item.indicatorDetailList.length > 1"
                                                            src="../../../../assets/images/minus.png"
                                                            alt=""
                                                            @click="deleteProcessValue(scope.row, scope.$index)"
                                                            style=" width: 20px;height: 20px;margin-right: 4px;margin-top: 5px"
                                                        >
                                                    </div>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>

                                </el-row>
                                <el-row>
                                    <div class="rowTitle">
                                        <span>平行样合格要求</span>
                                        <el-checkbox
                                            style="margin: 0 10px 0 20px"
                                            v-model="item.hasParallel"
                                            :true-value="1"
                                            :false-value="0"
                                            label="有平行样"
                                            size="small"
                                        />
                                    </div>
                                </el-row>
                                <el-row
                                    :span="24"
                                    v-if="item.hasParallel == 1"
                                >
                                    <div style="padding: 0 30px;width: 100%;">
                                        <el-table
                                            :data="item.parallelSample"
                                            style="width: 98%"
                                            border
                                            id="inspectionTask"
                                        >
                                            <el-table-column
                                                prop="relationDailyItemName"
                                                label="检测结果"
                                            >
                                                <template #default="scope">
                                                    <div class="complianceScope">
                                                        <el-input
                                                            v-model="scope.row.min"
                                                            placeholder="最小值"
                                                            style="width: 140px"
                                                            type="number"
                                                        />
                                                        <span style="margin: 0 10px">-</span>
                                                        <el-input
                                                            v-model="scope.row.max"
                                                            placeholder="最大值"
                                                            style="width: 140px"
                                                            type="number"
                                                        />
                                                        <el-checkbox
                                                            style="margin: 0 10px"
                                                            v-model="scope.row.containsMin"
                                                            :true-value="1"
                                                            :false-value="0"
                                                            label="包含最小值"
                                                            size="small"
                                                        />
                                                        <el-checkbox
                                                            style="margin: 0 10px"
                                                            v-model="scope.row.containsMax"
                                                            :true-value="1"
                                                            :false-value="0"
                                                            label="包含最大值"
                                                            size="small"
                                                        />
                                                    </div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="relationDailyItemName"
                                                label="相对偏差值"
                                                width="300"
                                            >
                                                <template #default="scope">
                                                    <div class="complianceScope">
                                                        <el-select
                                                            v-model="scope.row.deviationSymbol"
                                                            placeholder="请选择"
                                                            style="width: 120px"
                                                        >
                                                            <el-option
                                                                v-for="item in symbolList"
                                                                :key="item"
                                                                :label="item"
                                                                :value="item"
                                                            />
                                                        </el-select>
                                                        <el-input
                                                            v-model="scope.row.deviation"
                                                            placeholder=""
                                                            style="width: 100px"
                                                            type="number"
                                                        />
                                                        <span style="margin: 0 10px">%</span>
                                                    </div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="relationDailyItemName"
                                                label="操作"
                                                width="80px"
                                            >
                                                <template #default="scope">
                                                    <div
                                                        class="operateIcon"
                                                        v-show="taskType != 'detail'"
                                                    >
                                                        <img
                                                            src="../../../../assets/images/plus.png"
                                                            alt=""
                                                            @click="addParallelSample(scope.row, scope.$index)"
                                                            style=" width: 20px;height: 20px;margin-right: 4px;margin-top: 5px"
                                                        >
                                                        <img
                                                            v-if="item.parallelSample.length > 1"
                                                            src="../../../../assets/images/minus.png"
                                                            alt=""
                                                            @click="deleteParallelSample(scope.row, scope.$index)"
                                                            style=" width: 20px;height: 20px;margin-right: 4px;margin-top: 5px"
                                                        >
                                                    </div>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>

                                </el-row>
                                <el-row>
                                    <div
                                        class="rowTitle"
                                        style="margin: 24px 0 20px"
                                    >
                                        <span>质控样</span>
                                        <el-checkbox
                                            style="margin: 0 10px 0 20px"
                                            v-model="item.hasQualityControl"
                                            :true-value="1"
                                            :false-value="0"
                                            label="有质控样"
                                            size="small"
                                        />
                                    </div>
                                </el-row>
                                <!-- <el-row v-if="item.hasQualityControl == 1">
                                    <el-col :span="5">
                                        <el-form-item
                                            label="标准值"
                                            prop="indicatorName"
                                            style="width: 100%;"
                                        >
                                            <el-input
                                                v-model="item.qualityControlSample.standard"
                                                placeholder="请输入"
                                            />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-form-item
                                            label="±"
                                            prop="indicatorName"
                                            style="width: 100%;"
                                            label-width="30"
                                        >
                                            <el-input
                                                v-model="item.qualityControlSample.deviation"
                                                placeholder="请输入"
                                            />
                                        </el-form-item>
                                    </el-col>
                                </el-row> -->

                                <!-- <el-row
                                    v-for="(m, n) in item.indicatorDetailList"
                                    :key="n"
                                >
                                    <el-col :span="10">
                                        <el-form-item
                                            :label="n == 0 ? '关联指标' : ' '"
                                            prop="description"
                                            style="width: 100%;"
                                        >
                                            <el-input
                                                v-model="m.dailyIndicator"
                                                placeholder="显示名称"
                                            />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <div class="el-col-content">
                                            <el-select
                                                v-model="m.relatedIndicator"
                                                placeholder="请选择"
                                                style="margin-left: 10px;"
                                            >
                                                <el-option
                                                    v-for="item in relatedIndicatorList"
                                                    :key="item"
                                                    :label="item"
                                                    :value="item"
                                                />
                                            </el-select>
                                        </div>
                                    </el-col>
                                    <el-col :span="2">
                                        <div
                                            class="operateIcon"
                                            style="width: 80px;margin-left: 10px;"
                                            v-show="taskType != 'detail'"
                                        >
                                            <img
                                                src="../../../../assets/images/plus.png"
                                                alt=""
                                                @click="addProcessValue(m,n)"
                                                style=" width: 20px;height: 20px;margin-right: 4px;margin-top: 5px"
                                            >
                                            <img
                                                v-if="item.indicatorDetailList.length > 1"
                                                src="../../../../assets/images/minus.png"
                                                alt=""
                                                @click="deleteProcessValue(m,n)"
                                                style=" width: 20px;height: 20px;margin-right: 4px;margin-top: 5px"
                                            >
                                        </div>
                                    </el-col>
                                </el-row> -->

                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-form>
            </div>
        </el-scrollbar>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="taskCancel">取消</el-button>
                <el-button
                    type="primary"
                    v-if="taskType != 'detail'"
                    @click="taskConfirm(taskType)"
                >
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import taskHttp from "@/https/task.js";
import Storage from "@/utils/storage.js";
import {
    Delete,
    Edit,
    View
} from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, ref, watch } from "vue";

let searchForm = ref({
    depId: "",
    title: "",
    pageNo: 1,
    pageSize: 10,
});
const localTypeUnit = ref();
localTypeUnit.value = Storage.localGet("depId")
console.log(localTypeUnit.value, 'localTypeUnit.value ')
searchForm.value.depId = Number(localTypeUnit.value)
// dict
const depIdList = ref([
    { label: "公司", value: 1 },
    { label: "星沙厂", value: 2 },
    { label: "城西厂", value: 3 },
    { label: "城北厂", value: 4 },
    { label: "城南厂", value: 5 },
    { label: "城东厂", value: 6 },
]);
const taskDepIdList = ref([
    { label: "星沙厂", value: 2 },
    { label: "城西厂", value: 3 },
    { label: "城北厂", value: 4 },
    { label: "城南厂", value: 5 },
    { label: "城东厂", value: 6 },
]);
const taskCategoryList = ref([
    { label: "管理规范", value: 1 },
    { label: "水质数据", value: 2 },
    { label: "工艺数据", value: 3 },
    { label: "曲线绘制", value: 4 },
])
const symbolList = ref(['>', '<', '≥', '≤', '≠'])
const taskList = ref([])
const getTaskList = async () => {
    const res = await taskHttp.queryTaskList(searchForm.value)
    console.log(res.data.data, 'res')
    taskList.value = res.data.data
}
const relatedIndicatorList = ref([])
const getRelatedIndicatorFn = async (depId) => {
    const res = await taskHttp.indicatorList(depId)
    console.log(res.data.data)
    relatedIndicatorList.value = res.data.data
    console.log(relatedIndicatorList.value)
}
let tableData = ref([]);
let total = ref(0);
const handleSizeChange = (val) => {
    searchForm.pageSize = val;
    search();
};
const handleCurrentChange = (val) => {
    searchForm.pageNo = val;
    search();
};
// 重置
const reset = async () => {
    searchForm.value.title = ''
    searchForm.value.taskCategory = 1
    search()
}
// 查询
const search = async () => {
    const res = await taskHttp.reportPropertiesPageList(searchForm.value)
    console.log(res.data.data, 'res')
    res.data.data.records.forEach(item => {
        console.log(item)
        let relationDailyItem = []
        item.relatedIndicatorList.forEach(m => {
            console.log(m)
            relationDailyItem.push(m.indicatorName)
        })
        item.relationDailyItemName = relationDailyItem.join('、')
        console.log(item)
    })
    tableData.value = res.data.data.records
    total.value = res.data.data.total
}
// 数据类型转换
const depIdType = (type) => {
    let depIdName = ''
    depIdList.value.forEach(item => {
        if (item.value == type) {
            depIdName = item.label
        }
    })
    return depIdName
}
const titleType = (type) => {
    let titleName = ''
    taskList.value.forEach(item => {
        if (item.id == type) {
            titleName = item.title
        }
    })
    return titleName
}

//步骤active
const childrenTasksActiveName = ref(0)
const taskForm = ref({
    title: '',
    depId: 1,
    taskId: '',
    id: '',
    relatedIndicatorList: [{
        indicatorName: '',
        indicatorDetailList: [{
            dailyIndicator: '',
            relatedIndicator: '',
            standardScope: {
                containsMax: 0,
                containsMin: 0,
                max: '',
                min: '',
            }
        }],
        parallelSample: [{
            containsMax: 0,
            containsMin: 0,
            deviation: 0,
            deviationSymbol: '',
            max: '',
            min: '',
        }],
        qualityControlSample: {
            deviation: '',
            standard: '',
        },
        hasParallel: 0,
        hasQualityControl: 0,
    }]
})
taskForm.value.depId = localTypeUnit.value == 1 ? 2 : Number(localTypeUnit.value)
const taskFormRef = ref()
const taskVisible = ref(false)
const taskTitle = ref('')
const taskType = ref('')
// 新增/编辑
const handleClick = async (type, row) => {
    console.log(row, 'row')
    getRelatedIndicatorFn(taskForm.value.depId)
    taskType.value = type
    taskVisible.value = true
    taskForm.value.title = ''
    if (type == 'add') {
        taskTitle.value = '新增'
    } else if (type == 'detail') {
        taskTitle.value = '详情'
        row.relatedIndicatorList.forEach(item => {
            item.indicatorDetailList.forEach(m => {
                if (!m.standardScope) {
                    m.standardScope = {
                        containsMax: 0,
                        containsMin: 0,
                        max: '',
                        min: '',
                    }
                }
            })
            if (!item.parallelSample) {
                item.parallelSample = [{
                    containsMax: 0,
                    containsMin: 0,
                    deviation: 0,
                    deviationSymbol: '',
                    max: '',
                    min: '',
                }]
                item.qualityControlSample = {
                    deviation: '',
                    standard: '',
                }
            }
        })
        if (!row.hasParalle) {
            row.hasParalle = 0
        }
        if (!row.hasQualityControl) {
            row.hasQualityControl = 0
        }
        taskForm.value = { ...row }
    } else if (type == 'edit') {
        taskTitle.value = '编辑'
        row.relatedIndicatorList.forEach(item => {
            item.indicatorDetailList.forEach(m => {
                if (m.standardScope == null) {
                    m.standardScope = {
                        containsMax: 0,
                        containsMin: 0,
                        max: '',
                        min: '',
                    }
                }
            })
            if (!item.parallelSample) {
                item.parallelSample = [{
                    containsMax: 0,
                    containsMin: 0,
                    deviation: 0,
                    deviationSymbol: '',
                    max: '',
                    min: '',
                }]
                item.qualityControlSample = {
                    deviation: '',
                    standard: '',
                }
            }
        })
        if (!row.hasParalle) {
            row.hasParalle = 0
        }
        if (!row.hasQualityControl) {
            row.hasQualityControl = 0
        }
        taskForm.value = { ...row }
        console.log(taskForm.value, 'taskForm.value')
    }
}
const taskIdChange = (v) => {
    taskForm.value.title = titleType(v)
}
// 删除
const handleDelete = async (row) => {
    ElMessageBox.confirm(
        `是否删除该配置【${titleType(row.title)}】？`,
        "删除",
        {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
        }
    )
        .then(async () => {
            const res = await taskHttp.deleteProperties({ id: row.id })
            if (res.data.code == 200) {
                search()
            }
        })
}

// 增加步骤
const addSteps = () => {
    taskForm.value.relatedIndicatorList.push({
        indicatorName: '',
        indicatorDetailList: [{
            dailyIndicator: '',
            relatedIndicator: '',
            standardScope: {
                containsMax: 0,
                containsMin: 0,
                max: '',
                min: '',
            }
        }]
    })
    childrenTasksActiveName.value = taskForm.value.relatedIndicatorList.length - 1
}
// 删除步骤
const deleteSteps = () => {
    taskForm.value.relatedIndicatorList.splice(childrenTasksActiveName.value, 1)
    if (childrenTasksActiveName.value > 0) {
        childrenTasksActiveName.value = childrenTasksActiveName.value - 1
    } else {
        childrenTasksActiveName.value = 0
    }
}
// 增加步骤分解
const addProcessValue = () => {
    taskForm.value.relatedIndicatorList[childrenTasksActiveName.value].indicatorDetailList.push({
        dailyIndicator: '', // 任务描述
        relatedIndicator: '', // 注意事项
        standardScope: {
            containsMax: 0,
            containsMin: 0,
            max: '',
            min: '',
        }
    })
}
// 删除步骤分解
const deleteProcessValue = (item, index) => {
    console.log(item, index)
    taskForm.value.relatedIndicatorList[childrenTasksActiveName.value].indicatorDetailList.splice(index, 1)
}
// 增加步骤分解
const addParallelSample = () => {
    taskForm.value.relatedIndicatorList[childrenTasksActiveName.value].parallelSample.push({
        containsMax: 0,
        containsMin: 0,
        deviation: 0,
        deviationSymbol: '',
        max: '',
        min: '',
    })
}
// 删除步骤分解
const deleteParallelSample = (item, index) => {
    console.log(item, index)
    taskForm.value.relatedIndicatorList[childrenTasksActiveName.value].parallelSample.splice(index, 1)
}
const taskCancel = async (type) => {
    taskVisible.value = false
    search()
}
const taskConfirm = async (type) => {
    if (type == 'add') {
        const res = await taskHttp.addProperties(taskForm.value)
        if (res.data.code == 200) {
            console.log(res.data.data, res.data.code)
            taskVisible.value = false
            search()
            ElMessage({
                type: 'success',
                message: '新增成功'
            })
        } else {
            ElMessage({
                type: 'error',
                message: res.data.msg
            })
        }
    } else {
        const res = await taskHttp.editProperties(taskForm.value)
        if (res.data.code == 200) {
            console.log(res.data.data, res.data.code)
            taskVisible.value = false
            search()
            ElMessage({
                type: 'success',
                message: '保存成功'
            })
        } else {
            ElMessage({
                type: 'error',
                message: res.data.msg
            })
        }
    }
}

watch(
    () => taskForm.value.depId,
    (val) => {
        getRelatedIndicatorFn(val)
    },
    { deep: true }
)
onMounted(() => {
    search()
    getTaskList()
})
</script>

<style scoped lang="less">
.dialogContent {
    width: 960px;
    padding-top: 16px;
    .dialogModel {
        .modelTitle {
            font-size: 16px;
            line-height: 18px;
            height: 18px;
            padding-left: 10px;
            border-left: 4px solid #58be3f;
            margin-bottom: 10px;
            font-weight: 500;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            .operateIcon {
                margin-left: 10px;
                img {
                    width: 18px;
                    height: 18px;
                    margin: 0 2px;
                    cursor: pointer;
                }
            }
        }
    }
}
.operateIcon {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.el-col-content {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    .el-col-content-input {
        margin-right: 10px;
    }
}
.el-col-content-mr {
    margin-right: 10px;
    cursor: pointer;
}
.calculationFormula {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 12px;
    .calculationFormulaContent {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        .calculationFormulaContentItem {
            position: relative;
            .delelteItem {
                position: absolute;
                right: 1px;
                top: -3px;
                z-index: 1000;
                background: #f56c6c;
                border-radius: 4px;
                padding: 2px 2px 0px;
            }
        }
    }
}

.demo-tabs {
    padding-bottom: 30px;
}
.rowTitle {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 32px;
    margin: 10px 0 20px;
    font-weight: bold;
}
.complianceScope {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}
</style>